<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            
        }
       body{
           height: 100vh;
           background-color: rgb(11, 10, 46);
       }
    </style>
</head>
<body>
     

     <canvas id="canvas"></canvas>
     <script>
        var canvas = document.querySelector("#canvas");
        var ctx = canvas.getContext("2d");
        var arr = [];
        var num = 60;
        var xZou,yZou,temp;

      window.onresize=resizeCanvas;
        function resizeCanvas(){
            canvas.width=window.innerWidth;
            canvas.height=window.innerHeight;
            arr.length = 0;
            chushi();
        }
        resizeCanvas(); 
        function chushi(){
            for(let i=0;i<num;i++){
                arr.push({
                    x:10+Math.random()*(canvas.width-20),
                    y:10+Math.random()*(canvas.height-20),
                    r:10,
                    dx:10*Math.random()-5,
                    dy:10*Math.random()-5,
                    color: "rgba(7, 156, 255,0.6)"
                })
            }
        }
        function draw(){
            for(let i=0;i<num;i++){
                var yuan = arr[i];
                 ctx.beginPath();
                 ctx.arc(yuan.x,yuan.y,yuan.r,0,3.14*2,false);
                 ctx.fillStyle = yuan.color;
                 ctx.fill();
                 for(let j=i;j<num;j++){
                    if(Math.abs(yuan.x-arr[j].x)<150&&Math.abs(yuan.y-arr[j].y)<150){
                        ctx.beginPath();
                        ctx.moveTo(yuan.x,yuan.y);
                        if(Math.abs(yuan.x-xZou)<150&&Math.abs(yuan.y-yZou)<150&&temp){
                        ctx.lineTo(xZou,yZou);
                        }
                        ctx.lineTo(arr[j].x,arr[j].y); 
                        ctx.closePath();
                        let tm = Math.sqrt(Math.abs(yuan.x-arr[j].x)*Math.abs(yuan.x-arr[j].x) + Math.abs(yuan.y-arr[j].y)*Math.abs(yuan.y-arr[j].y)) / 212;
                        ctx.strokeStyle = `rgba(7, 156, 255,${1-tm})`;
                        ctx.stroke();
                       /*  ctx.fill(); */
                    }

                 }
            }
        }

        function updates(){
            for(let i=0;i<num;i++){
                if(Math.abs(arr[i].x-xZou)<150&&Math.abs(arr[i].y-yZou)<150&&temp){
                    arr[i].x += -(arr[i].x-xZou)/(10*Math.random()+20);
                    arr[i].y += -(arr[i].y-yZou)/(10*Math.random()+20);
                }
                else{
                arr[i].x += arr[i].dx; 
                arr[i].y += arr[i].dy; 
                }
                if(arr[i].x<=arr[i].r || arr[i].x >= (canvas.width - arr[i].r) ){
                    arr[i].dx = -arr[i].dx;
                }
                if(arr[i].y<=arr[i].r || arr[i].y >= (canvas.height - arr[i].r) ){
                    arr[i].dy = -arr[i].dy;
                }
            }
        }
        chushi();
        setInterval(function(){
              ctx.clearRect(0,0,canvas.width,canvas.height);
              draw();
              updates();
        },50)
         
        var xZou,yZou,temp;
        canvas.addEventListener('mousemove',function(e){
            xZou = e.clientX;
            yZou = e.clientY;
            temp=1;
        })
        canvas.addEventListener('mouseout',function(e){
                temp=0;
        })
     </script>

</body>
</html>
